<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="bg-white sticky top-0 z-[99]">
      <view class="p-3 border-solid border-0 border-b border-zinc-200">
        <u-search
          v-model="searchData.searchValue"
          height="80rpx"
          shape="square"
          placeholder="医生姓名 / 设备编号"
          :animation="true"
          @search="search"
          @custom="search"
          @clear="search"
          ></u-search>
      </view>
      <u-tabs
        :list="tabsList"
        :scrollable="false"
        :current="tabsCurrent"
        @change="tabsChange"></u-tabs>
    </view>

    <view
      v-for="(item, index) in dataList"
      :key="item.id"
      class="bg-white mt-3 mx-3 rounded-lg">
      <view
        class="flex justify-between items-center py-2 fz-12 px-3 borderBottom">
        <view class="flex">
          <i class="iconfont mr-1">&#xe661;</i>
          <text>设备编号：</text>
          <text class="pl-2">{{ item.serialNo }}</text>
        </view>
        <view>
          <text v-if="item.activationStatus === '未激活'" class="u-error">
            未激活
          </text>
          <text v-else-if="item.useDesc === '正常'" class="u-primary">
            {{ item.useDesc }}
          </text>
          <text v-else class="u-warning">{{ item.useDesc }}</text>
        </view>
      </view>

      <view class="px-3 py-1">
        <view class="py-2 flex justify-between">
          <view class="flex-shrink-0 pr-4 u-tips-color">所在机构</view>
          <view>{{ item.companyName }}</view>
        </view>
        <view class="py-2 flex justify-between">
          <view class="flex-shrink-0 pr-4 u-tips-color">分配日期</view>
          <view>{{ item.companyTime }}</view>
        </view>
        <!-- <view class="py-2 flex justify-between">
          <view class="flex-shrink-0 pr-4 u-tips-color">累计单数</view>
          <view>{{ item.deviceOrderStats?.deviceOrderNum ?? 0 }}</view>
        </view>
        <view class="py-2 flex justify-between">
          <view class="flex-shrink-0 pr-4 u-tips-color">金额</view>
          <view>{{ item.deviceOrderStats?.deviceOrderCost ?? 0 }}</view>
        </view> -->
      </view>
    </view>
    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="0" />
    <LoadMore v-else :status="loadStatus" />
  </PublicPage>
</template>

<script setup lang="ts">
import { deviceList, deviceStats } from '@/api/device'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { usePageList } from '@/hooks/usePageList'
import { DeviceItemTypes, DeviceStatsTypes } from '@/types/device'
import Empty from "@/components/empty.vue";
import LoadMore from "@/components/loadMore.vue";

const tabsList = ref([
  {
    name: '全部',
    value: ''
  },
  {
    name: '正常',
    value: '0'
  },
  {
    name: '需跟进',
    value: '1'
  }
])
const tabsCurrent = ref(0); // tabs选中下标
const tabsChange = (val: { name: string; value: string; index: number }) => {
  tabsCurrent.value = val.index
  searchData.deviceState = val.value
  search();
}

// 查询列表参数
const searchData = reactive({
  searchValue: '',
  deviceState: ''
})

// 获取列表
const { getList, search, list: dataList, status: loadStatus } = usePageList<DeviceItemTypes>((params) =>
  deviceList({ ...params, ...searchData })
);

// 获取设备统计
const getDeviceStatistics = async () => {
  const { data } = await deviceStats<DeviceStatsTypes>().finally(() => {
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  })
  tabsList.value[0].name = `全部(${data.allDeviceNum}台)`
  tabsList.value[1].name = `正常(${data.normalDeviceNum}台)`
  tabsList.value[2].name = `需跟进(${data.traceDeviceNum}台)`
}

onLoad(() => {
  getList();
  getDeviceStatistics();
});
// 下拉刷新
onPullDownRefresh(() => {
  search();
  getDeviceStatistics();
});
// 加载更多
onReachBottom(()=>{
  getList();
});
</script>

<style lang="scss" scoped></style>
